<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/css/login_reg.css}">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
</head>
<body class="login_reg_body">
<div class="mainbody middle">
    <form class="form-box front" onsubmit="return false">
        <div style="text-align: center">
            <h1 style="color: white">高校丘比特</h1>
        </div>
        <div>
            <input class="input-normal" type="email" placeholder="邮箱" name="email" id="loginEmail"/>
            <input class="input-normal" type="password" placeholder="密码" name="password" id="loginPassword"/>
            <button class="btn-submit" type="submit" onclick="loginBtnFun()">
                登录
            </button>
        </div>
        <div>
            <p style="margin-top: 40px">If you don't have account.Please</p>
            <p>Click here to <a id="signup">注册</a></p>
            <script type="text/javascript">
                // 点击sigup触发翻转样式
                $("#signup").click(function() {
                    $(".middle").toggleClass("middle-flip");
                    $(".mainbody").css("height","550px");
                });
            </script>
        </div>
    </form>
    <!-- 对的你没看错，上下两个表单基本上没区别，一个front，一个back -->
    <form class="form-box back" onsubmit="return false">
        <div style="text-align: center">
            <h1>用户注册</h1>
        </div>
        <div>
            <input class="input-normal" type="email" placeholder="邮箱" name="email" id="regEmail"/>
            <input class="input-normal" type="password" placeholder="密码" name="password" id="regPassword"/>
            <input class="input-normal" type="password" placeholder="确认密码" name="confirm" onblur="confirmOnblur()" id="confirm"/>
            <input class="input-normal" type="text" placeholder="验证码" name="verification" style="margin-bottom: 5px" id="verification"/>
            <a class="verification" onclick="authenticateFun()">获取验证码</a>
            <button class="btn-submit" onclick="regBtnFun()">
                注册
            </button>
        </div>
        <div>
            <p style="margin-top: 40px">Have a account ? You can</p>
            <p>Click here to <a id="login">登陆</a></p>
            <script type="text/javascript">
                // 点击login触发翻转样式
                $("#login").click(function() {
                    $(".middle").toggleClass("middle-flip");
                    $(".mainbody").css("height","420px");
                });
            </script>
        </div>
    </form>
</div>
<script>
// <!-- 登录按钮单击事件-->
    function loginBtnFun() {
        let loginEmail = $("#loginEmail").val();
        let loginPassword = $("#loginPassword").val();
        $.ajax({
            url: "/user/login",
            type: "Get",
            data: {"email":loginEmail,"password":loginPassword},
            success:function (result) {
                if(result) {
                    location.href="/user/index"
                }else {
                    alert("用户名或密码错误");
                    location.href="/user"
                }
            }
        })
    }
    //获取验证码按钮单击事件
    function authenticateFun(){
        let email = $("#regEmail").val();
        if(email===""){
            alert("请输入邮箱")
        }
        else{
            $.ajax({
                url: "/user/authenticate",
                type: "Get",
                data: {"email":email},
                success: function (result) {
                    alert(result.status);
                }
            })
        }
    }
//    确认密码离焦事件
    function confirmOnblur() {
        let confirm = $("#confirm").val();
        let regPassword = $("#regPassword").val();
        if(confirm!==regPassword){
            alert("密码不一致");
            $("#confirm").attr("style","color: #ff0000");
        }else{
            $("#confirm").attr("style","color: #000000");
        }
    }
//    注册按钮单击事件
    function regBtnFun() {
        let email = $("#regEmail").val();
        let password = $("#regPassword").val();
        let confirm = $("#confirm").val();
        let verification = $("#verification").val();
        if(email===""||password===""||confirm===""||verification===""){
            alert("请完善信息");
        }else{
            $.ajax({
                url:"/user/reg",
                type:"Get",
                data:{"email":email,"password":password,"confirm":confirm,"verification":verification},
                success:function (result) {
                    if(result.status){
                        alert("注册成功！")
                        location.href="/user";
                    }else {
                        alert(result.msg);
                        location.href="/user";
                    }
                }
            })
        }
    }
</script>
</body>
</html>

